<template>
    <div class="home-page">
      <!-- 导航栏 -->
      <header>
        <p class="header-top">
            <img :src="topImg" alt="">  
        </p>
        <div class="nav">
            <span class="nav-logo">
              <img :src="logoImg" alt="" class="logo">
            <img :src="logoRImg" alt="" class="mark">
            </span>
            <div class="right">
              <a-menu mode="horizontal" :selectedKeys='selectedKeys' style="cursor: pointer;">
                <template v-for="(item,i) in titles">
                  <a-menu-item  v-if="item.children.length === 0"  :key="item.key" @click="primaryLabel(item.code,i)" ref='btn'>{{ item.title }}</a-menu-item>
                  <a-sub-menu v-else :key="item.key" :title="item.title"  @titleClick="primaryLabel(item.code,i)" ref='btn'>
                    <a-menu-item v-for="(subItem,idx) in item.children" :key="subItem.id" @click="childDetail(subItem,idx)">{{ subItem.title }}</a-menu-item>
                  </a-sub-menu>
                </template>
              </a-menu>
            </div>
        </div>
      </header>
      <!-- 首页top -->
      <div class="content content-top">
      </div>
      <HomePage v-if="homePageShow" @callback='callback'></HomePage>
     <ProductService v-if="productServiceShow" :busData='busData'></ProductService>
     <NewsCenter v-if="newsCenterShow"></NewsCenter>
     <NewsCenterList v-if="newsCenterListShow" :busData='busData'></NewsCenterList>
     <!-- 联系方式 -->
      <footer v-if="!homePageShow" class="content content-service home-footer footer">
        <img :src="footerImg" alt="" class="footerImg">
            <div class="info-top footer-info">
                <p class="tips">张恒春</p>
               <p class="text">
                电话：0553-5849208
                <br>
                传真：0553-5849208
              <br>
                地址：中国（安徽）自由贸易试验区芜湖片区凤鸣湖南路10号
              <br>
              皖ICP备15023079号-1  皖公网安备  34020702000356号
               </p>
             </div>
        <div class="info-right">
            <p>
              <ul>
                <li v-for="(j,i) in  qrcodes" :key="i" >
                <img :src="j.src" >
                <span>{{j.title}}</span>
                </li>
             </ul>
          </p>
          <p class="web-info">
            网站地图 | 法律声明 | 企业邮箱 | 内部平台
          </p>
         
        </div>
      </footer>
    </div>
</template>

<script>
import '@/assets/less/Home.less'
import  HomePage  from "./HomePage.vue";
import  ProductService  from "./ProductService.vue";
import  NewsCenter  from "./NewsCenter.vue";
import  NewsCenterList  from "./NewsCenterList.vue";
export default {
    name: 'ZhanghengchunHome',
    components:{
      HomePage,
      ProductService,
      NewsCenter,
      NewsCenterList
    },
    data() {
        return {
           current: ['mail'], 
            titles:[
              {title:'首页',key:0,code:'oneLevel',children:[]},
              {title:'品牌文化',key:1,code:'culture',
               children:[
              //   {title:'企业理念',key:0},
              //   {title:'企业介绍',key:1},
              //   {title:'企业视频',key:2},
              //   {title:'企业荣誉',key:3},
              ]
          
             },
              {title:'产品服务',key:2,code:'service',
               children:[
                {
                  title:'精品膏药',id:'0',code:'service'
                  },
                {title:'精品饮片',id:'1',code:'service'},
                {title:'精品中成药',id:'2',code:'service'},
                {title:'健康产品',id:'3',code:'service'},
                {title:'张恒春鸡药',id:'4',code:'service'},
              ]
              },
              {title:'新闻中心',key:3,code:'news',
              children:[
                {title:'大事记',id:'5',code:'news'},
                {title:'媒体报道',id:'6',code:'news'},
                {title:'名人轶事',id:'7',code:'news'},
                {title:'创新发展',id:'8',code:'news'},
                {title:'张恒春新闻',id:'9',code:'news'},
              ]},
              {title:'走进张恒春',key:4,code:'brand',
              children:[
              //   {title:'馆藏珍品',key:0},
              //   {title:'历史渊源',key:1},
              //   {title:'牌匾题词',key:2},
              //   {title:'组织架构',key:3},
              //   {title:'董事长致辞',key:4},
              //   {title:'非物质文化遗产',key:5},
              ]
              },
            ], // 导航
              qrcodes:[
              {src:require('@/assets/imsges/qrcode1.png'),title:'张恒春公众号'},
              {src:require('@/assets/imsges/qrcode2.png'),title:'张恒春微博'},
              {src:require('@/assets/imsges/qrcode3.png'),title:'张恒春抖音'},
            ],// 二维码
            selectedKeys:[0],
           homePageShow:true,//首页
           productServiceShow:false,//产品服务
           newsCenterShow:false,//新闻中心
           newsCenterListShow:false,//新闻列表
            topImg:require('@/assets/imsges/top.png'),
            logoImg:require('@/assets/imsges/logo.jpg'),
            logoRImg:require('@/assets/imsges/logo-r.png'),
            footerImg:require('@/assets/imsges/footer.png'),
            busData:{
              code:'',
              activeId:0
            },
        };
    },
  created(){
  },
    methods: {
      // 一级标签
    primaryLabel(code,idx){
      this.selectedKeys=[idx] // 有子级不生效
    console.log(this.selectedKeys,'selectedKeys');
     this.busData={
            code:code,
            activeId:0
          }
      switch(code){
        case 'oneLevel':
          this.productServiceShow =false
          this.newsCenterShow =false
          this.newsCenterListShow =false
             setTimeout(() => {
        this.homePageShow = true;
      }, 1000);
          break;
        case 'service':
          this.homePageShow =false
              this.newsCenterShow =false
              this.newsCenterListShow =false
              setTimeout(() => {
              this.productServiceShow= true;
            }, 1000);
          break;
        case 'news':
              this.homePageShow =false
              this.productServiceShow =false
              this.newsCenterListShow =false
              this.newsCenterShow =false
              setTimeout(() => {
              this.newsCenterShow = true;
            }, 1000);
          break;
        case 'brand':
        case 'culture':
          return
      }
    },

    // 二级菜单
    childDetail(data,idx){
      console.log(idx,'idx');
      this.selectedKeys=[2] // 有子级不生效

        this.busData={
            code:data.code,
            activeId:idx
          }
        switch(data.code){
          case 'service':
          this.homePageShow =false
          this.newsCenterShow =false
          this.newsCenterListShow =false
            this.productServiceShow = false;
          
            setTimeout(() => {
            this.productServiceShow = true;
          }, 1000);
        break;
        case 'news':
            this.productServiceShow =false
            this.newsCenterShow =false
            this.homePageShow =false
            this.newsCenterListShow= false;

             setTimeout(() => {
            this.newsCenterListShow= true;
         }, 1000);
        break;
        }
        },
  
    // 首页组件 callback
    callback(data,idx){
     this.primaryLabel(data,idx)
    // this.$refs.btn[0].$el.click(data)
    }
    },
};
</script>

<style lang="scss" scoped>

</style>